<template>
  <div class="box-container">
    <van-tabs class="selectborder" scrollspy sticky color="#FF684A" :ellipsis="false">
      <van-tab title="VIP会员" v-if="!token">
        <div class="tabUp">VIP会员</div>
        <div class="member">
          <div class="member-inner">
            <div class="member-text">连续包月</div>
            <div class="member-price"><span>¥</span>239</div>
            <div class="member-price-discount" style="text-decoration: none">&nbsp;</div>
            <button class="member-buy">立即抢购</button>
          </div>
          <div class="member-inner">
            <div class="member-text">季卡</div>
            <div class="member-price"><span>¥</span>668</div>
            <div class="member-price-discount">¥668</div>
            <button class="member-buy">立即抢购</button>
          </div>
          <div class="member-inner">
            <div class="member-text">年卡</div>
            <div class="member-price"><span>¥</span>2380</div>
            <div class="member-price-discount">¥2380</div>
            <button class="member-buy">立即抢购</button>
          </div>
        </div>
      </van-tab>
      <van-tab title="团体课"
        ><div class="tabUp">团体课</div>
        <van-tabs color="#000000" class="selectTab" :ellipsis="false">
          <van-tab v-for="index in 5" :key="index">
            <template #title>
              <span
                ><span>{{ week[index - 1] }}</span></span
              ><br /><span class="date">{{ month[index - 1] }}.{{ days[index - 1] }}</span>
            </template>
            <course v-for="inDex in 3" :key="inDex" :j="index - 1" :i="inDex - 1"></course>
          </van-tab>
        </van-tabs>
      </van-tab>
      <van-tab title="私教">
        <private-coach></private-coach>
      </van-tab>
      <van-tab title="训练营">
        <training-camp></training-camp>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Course from './Course.vue'
import PrivateCoach from './PrivateCoach.vue'
import TrainingCamp from './TrainingCamp.vue'
export default {
  components: { Course, PrivateCoach, TrainingCamp },
  name: 'Member',
  data() {
    return {
      k: '',
      week: [],
      month: [],
      days: []
    }
  },

  mounted() {
    this.getDate()
  },

  methods: {
    getDate() {
      // 得到今天的日期
      var today = new Date()
      var a = 1000 * 60 * 60 * 24
      var today1 = new Date(+today + a)
      var today2 = new Date(+today + a * 2)
      var today3 = new Date(+today + a * 3)
      var today4 = new Date(+today + a * 4)
      var Year = today.getFullYear()
      var Month = today.getMonth() + 1
      // 得到当前年今天是周几
      var Day = today.getDay()
      var weekday = ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '周一', '周二', '周三']
      // var myweek = weekday[Day]
      this.week = ['今天', '明天', weekday[Day + 1], weekday[Day + 2], weekday[Day + 3]]
      var mydate = today.getDate()
      var mydate1 = today1.getDate()
      var mydate2 = today2.getDate()
      var mydate3 = today3.getDate()
      var mydate4 = today4.getDate()
      var mymonth = today.getMonth() + 1
      var mymonth1 = today1.getMonth() + 1
      var mymonth2 = today2.getMonth() + 1
      var mymonth3 = today3.getMonth() + 1
      var mymonth4 = today4.getMonth() + 1
      // console.log(new Date(+today+a));
      this.days = [mydate, mydate1, mydate2, mydate3, mydate4]
      this.month = [mymonth, mymonth1, mymonth2, mymonth3, mymonth4]
    }
  },
  computed: {
    token() {
      return this.$store.state.tokenInfo.length == 0
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-tabs__line {
  bottom: 18px;
}
/deep/.van-sticky .van-tabs__wrap--scrollable {
  .van-tab {
    font-family: Georgia;
  }
  .van-tab--active {
    font-size: 22px;
    color: #000;
  }
}

.box-container {
  margin: 0 auto;
  width: 344px;
  border-radius: 10px;
  background-color: #fff;
  /deep/.van-sticky--fixed {
    top: 42px;
  }
  .selectborder {
    padding-top: 10px;
    .member {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      width: 90%;
      height: 115px;
      .member-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 32.5%;
        height: 100%;
        background-color: #fdeddc;
        border-radius: 5px;
        .member-text {
          font-size: 14px;
          color: #b7721f;
        }
        .member-price {
          font-size: 30px;
          font-family: SimHei;
          font-weight: 600;
          color: #b7721f;
          span {
            font-size: 10px;
            font-weight: 400;
            padding-right: 2px;
          }
        }
        .member-price-discount {
          font-size: 10px;
          font-weight: 600;
          color: #b7721f;
          font-family: SimHei;
          padding: 1px 0px 5px 0px;
          text-decoration: line-through;
        }
        .member-buy {
          border: none;
          border-radius: 20px;
          background-color: #ff4e00;
          color: white;
          font-size: 8px;
          padding: 3px 16px;
        }
      }
    }
    /deep/.van-tabs__wrap {
      height: 50px;
      border-radius: 10px;
    }
  }
}

/deep/.van-tab__pane .tabUp {
  font-family: Georgia;
  font-size: 16px;
  margin: 15px 17px;
}
/deep/.selectTab .van-tabs__wrap {
  .van-tab__text {
    text-align: center;
    .date {
      font-size: 10px;
      font-weight: bold;
    }
  }
}
</style>
